<template>
  <div class="container">
    <!-- <h2>设备类型</h2> -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline" size="medium">
        <el-form-item label="设备编号：">
          <el-input v-model="queryObj.innerCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" class="searchBtn" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content">

      <!-- 表格区域 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{
          backgroundColor: 'rgb(243, 246, 251)',
          fontWeight: 500,
          padding: '9px 0'
        }"
      >
        <el-table-column
          label="序号"
          width="100"
          type="index"
          prop="id"
        />
        <el-table-column
          label="设备编号"
          width="300"
          prop="innerCode"
        />
        <el-table-column
          label="设备型号"
          width="300"
          prop="type.name"
        />
        <el-table-column
          label="详细地址"
          width="300"
          prop="node.name"
        />
        <el-table-column
          label="运营状态"
          width="200"
          prop="vmStatus"
        >
          <template #default="{row}">
            <span>{{ row.vmStatus?row.vmStatus===1?'运营': '撤机' : '未投放' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="设备状态"
          width="350"
          prop="status"
        >
          <template>
            <div class="status">
              <div class="one">离线</div>
              <div class="two">货道</div>
              <div class="three">传动轴</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="100"
        >
          <template #default="{row}">
            <el-button type="text" @click="openDialog(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格区域 -->

      <!-- 分页区域 -->
      <el-pagination
        :current-page="queryObj.pageIndex"
        :page-size="queryObj.pageSize"
        popper-class="selectPagesize"
        layout="slot, prev,  next"
        background
        prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template>
          <span class="pagnation">共{{ totalCount }}条记录 第{{ queryObj.pageIndex }}/{{ totalPage }}页</span>
        </template>
      </el-pagination>
      <!-- 分页区域 -->

      <!-- 查看详情弹窗 -->
      <el-dialog
        title="设备详情"
        :visible.sync="dialogVisible"
        width="45%"
      >
        <div class="message">
          <el-row class="msg">
            <el-col :span="6">销售量：<span>{{ sellCount }}个</span></el-col>
            <el-col :span="6">销售额：<span>{{ sellValue }}元</span></el-col>
            <el-col :span="6">补货次数：<span>{{ updateProCount }}次</span></el-col>
            <el-col :span="6">维修次数：<span>{{ fixCount }}次</span></el-col>
          </el-row>
        </div>
        <div class="sellCount">商品销量（月）</div>
        <div v-if="sellList.length" class="sellList">
          <el-row>
            <el-col v-for="(item,index) in sellList" :key="index" class="proItem" :span="6"><div class="proName">{{ item.skuName }}</div><div class="count">: {{ item.count }}</div></el-col>
          </el-row>
        </div>
        <div v-else class="sellNone">当前设备未销售商品</div>

      </el-dialog>
      <!-- 查看详情弹窗 -->

    </div>
  </div>
</template>

<script>
import { list } from '@/api/equipments/equipment'
import { fixCount, updateProCount, proCount } from '@/api/equipments/status'
export default {
  name: 'EquipmentStatus',

  data() {
    return {
      tableData: [],
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        innerCode: null
      },
      totalCount: null,
      totalPage: '',
      dialogVisible: false,
      sellCount: '',
      sellValue: '',
      updateProCount: '',
      fixCount: '',
      sellList: []

    }
  },

  mounted() {
    this.initTable()
  },

  methods: {
    async initTable() {
      const data = await list(this.queryObj)
      this.tableData = data.currentPageRecords
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
      console.log(data)
    },
    // 当每页条数数据改变时触发
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      // 修改本地传参发请求的每页条数数据，以便发请求
      this.queryObj.pageSize = val
      // 改变每页数据条数时，将当前页初始化为1，在请求数据
      this.queryObj.pageIndex = 1
      this.initTable()
    },
    // 当当前页页数改变时触发
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      // 修改本地传参发请求的当前页数据，以便发请求
      this.queryObj.pageIndex = val
      this.initTable()
    },
    // 搜素功能
    search() {
      this.initTable()
    },
    // 打开弹窗
    async openDialog(row) {
      row.createTime = row.createTime.substring(0, 10)
      row.lastSupplyTime = row.lastSupplyTime.substring(0, 10)
      // console.log(row)
      this.updateProCount = await updateProCount(row)
      this.fixCount = await fixCount(row)
      const data = await proCount(row)
      // console.log(data)
      this.sellList = data
      this.sellCount = data.reduce((prev, item) => {
        return prev + item.count
      }, 0)
      this.sellValue = data.reduce((prev, item) => {
        return prev + (item.count * item.amount)
      }, 0)

      this.dialogVisible = true
    },

    // 关闭弹窗
    close() {
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
 td {
  padding: 2px 0;
  border: none;
 }
 // &::before {
 //  height: 0;
 // }
}
.container{
  padding: 20px;
  .search{
  display: flex;
  align-items: center;
  height: 64px;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
  padding-top: 23px;
  .searchBtn{
    background-color: #5373e0;
  }
}

  .el-pagination{
  position: relative;
   display: flex;
   justify-content: end;
   padding: 32px 16px;
   height: 32px;
   align-items: center;
   ::v-deep .btn-prev{
    width: 70px;
    height: 32px;
    background-color: #d5ddf8;
   }
   ::v-deep .btn-next{
    width: 70px;
    height: 32px;
    background-color: #d5ddf8;
   }
   .pagnation{
    position: absolute;
    left: 0;
    font-size: 16px!important;
    color: #dbdfe5!important;
    font-weight: normal;
   }

  }

  .status{
    display: flex;
    align-items: center;
    text-align: center;
    .one{
      margin-right: 10px;
      background: #ff665f linear-gradient(135deg,#ffb043,#ffc020);
      height: 23px;
     padding: 0 12px;
     color: #fff;
     border-radius: 14px;
    }
    .two,.three{
            margin-right: 10px;
      background: #ff665f linear-gradient(135deg,#3fc997,#4bda98);
      height: 23px;
     padding: 0 12px;
     color: #fff;
     border-radius: 14px;
    }
  }
  .message{
    width: 579px;
    margin: 0 auto;
    background-color: #f4f6fb;
    height: 54px;
    line-height: 54px;
    padding: 0 15px;
    .msg{
      span{
      color: #5f84ff;
    }
    }
  }
  .sellCount{
    margin: 20px 0 12px 6px;
  }
  .sellList{
    color: #666;
    text-align: center;
    display: table;
    border-top: 1px solid #d8dde3;
    border-left: 1px solid #d8dde3;
    .proItem{
      // border: 1px solid #d8dde3;
    border-right: 1px solid #d8dde3;
    border-bottom: 1px solid #d8dde3;
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      .proName{
        width: 73px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .sellNone{
    text-align: center;
  }

}
</style>
